<template>
  <div class="activityList">
    <!-- 搜索 -->
    <div class="section">
      <h3>优惠券活动</h3>
      <search-item
        @searchList="searchData"
        @showconfirmPopDialog="showconfirmPopDialog"
      ></search-item>
    </div>
    <!-- 表格 -->
    <el-table
      :height="tabHeight"
      border
      style="width: 99%"
      align="center"
      :data="tableData"
      v-loading="loading"
    >
      <el-table-column
        prop="activityId"
        label="ID"
        width="60"
      ></el-table-column>
      <el-table-column prop="activityName" label="活动名称"></el-table-column>
      <el-table-column
        prop="gameName"
        label="优惠券使用地点"
        width="252"
      ></el-table-column>
      <el-table-column
        prop="validity"
        label="优惠券有效时间"
        width="170"
      ></el-table-column>
      <el-table-column prop="type" label="活动类型" width="100">
        <template slot-scope="scope">
          <span v-if="scope.row.type == 0"></span>
          <span v-if="scope.row.type == 1">无门槛活动</span>
          <span v-if="scope.row.type == 2">满减券活动</span>
        </template>
      </el-table-column>
      <el-table-column label="活动状态" width="260">
        <template slot-scope="scope">
          <span>{{ scope.row.startTime }}</span
          >~
          <span>{{ scope.row.endTime }}</span>
          <span v-if="scope.row.status == '未开始'" style="color: #ad720e"
            >({{ scope.row.status }})</span
          >
          <span v-if="scope.row.status == '进行中'" style="color: #1c7231"
            >({{ scope.row.status }})</span
          >
          <span v-if="scope.row.status == '已结束'" style="color: #be1a1d"
            >({{ scope.row.status }})</span
          >
        </template>
      </el-table-column>
      <el-table-column prop="onlineStatus" label="优惠券状态" width="80">
        <template slot-scope="scope">
          <span v-if="scope.row.onlineStatus == 1" style="color: #ad720e"
            >未上线</span
          >
          <span v-if="scope.row.onlineStatus == 2" style="color: #1c7231"
            >已上线</span
          >
          <span v-if="scope.row.onlineStatus == 3" style="color: #be1a1d"
            >已下线</span
          >
        </template>
      </el-table-column>
      <el-table-column label="操作" width="270" class="operateButton">
        <template slot-scope="scope">
          <el-button
            type="primary"
            plain
            size="mini"
            @click="showdetail(scope.row)"
            >详情</el-button
          >

          <el-button
            type="primary"
            plain
            size="mini"
            @click="showData(scope.row)"
            v-if="
              !(
                (scope.row.type == 1||scope.row.type == 0) &&
                new Date().valueOf() >
                  scope.row.gameIssueTime + 60 * 60 * 24 * 6 * 1000
              )
            "
            >编辑活动时间</el-button
          >
          <el-button
            type="primary"
            plain
            size="mini"
            @click="onlineActivity(scope.row)"
            v-if="
              (scope.row.onlineStatus == 1 || scope.row.onlineStatus == 3) &&
              scope.row.status != '已结束'
            "
            >上线活动</el-button
          >
          <el-button
            type="primary"
            plain
            size="mini"
            @click="offlineActivity(scope.row)"
            v-if="scope.row.onlineStatus == 2 && scope.row.status != '已结束'"
            >下线活动</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="bottom">
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page.sync="pagenationData.currentPage"
        :page-size="pagenationData.pageSize"
        :total="pagenationData.pageTotal"
        background
        layout="prev, pager, next"
        prev-text="上一页"
        next-text="下一页"
      ></el-pagination>
    </div>
    <!-- 添加游戏 -->
    <AddActivity
      v-if="addactivitydialog.show"
      :isShow="addactivitydialog.show"
      :dialogRow="addactivitydialog.dialogRow"
      :addList="addactivitydialog.addlist"
      @closeDialog="hideaddactivityDialog"
    ></AddActivity>
    <!-- 优惠券详情 -->
    <CouponDetail
      v-if="coupondetaildialog.show"
      :isShow="coupondetaildialog.show"
      :dialogRow="coupondetaildialog.dialogRow"
      :dialogStatus="coupondetaildialog.dialogStatus"
      @closeDialog="hidecloseDialog"
    ></CouponDetail>
    <!-- 修改活动时间 -->
    <ModifyTime
      v-if="modifyTimedialog.show"
      :isShow="modifyTimedialog.show"
      :dialogRow="modifyTimedialog.dialogRow"
      @closeDialog="hidemodifyTimeDialog"
    ></ModifyTime>
    <!-- 添加  确认框 -->
    <ConfirmPop
      v-if="confirmPopdialog.show"
      :isShow="confirmPopdialog.show"
      @closeDialog="hideconfirmPopDialog"
      @showaddactivityDialog="showaddactivityDialog"
    ></ConfirmPop>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
import SearchItem from "./component/searchItem";
import AddActivity from "./component/addActivity";
import CouponDetail from "./component/couponDetail";
import ModifyTime from "./component/modifyTime";
import ConfirmPop from "./component/confirmPop";

import {
  getActivityList,
  getAddactData,
  getDetailList,
  activityOnline,
  activityOffline,
} from "@/api/activityManage";
export default {
  inject: ["reload"],
  data() {
    return {
      tabHeight: window.innerHeight - 230,
      search: {},
      tableData: [],
      loading: true,
      addactivitydialog: {
        show: false,
        dialogRow: {},
        addlist: {},
      },
      coupondetaildialog: {
        show: false,
        dialogRow: {},
        dialogStatus: "",
      },
      modifyTimedialog: {
        show: false,
        dialogRow: {},
      },
      pagenationData: {
        pageTotal: 0,
        currentPage: 1,
        pageSize: 20,
      },
      pageData: {
        page: 1,
        limit: 20,
      },
      confirmPopdialog: {
        show: false,
      },
    };
  },
  components: {
    SearchItem,
    AddActivity,
    CouponDetail,
    ModifyTime,
    ConfirmPop,
  },
  mounted() {
    this.getActivityList();
  },
  methods: {
    searchData(search) {
      this.search = search;
      this.search.page = 1;
      this.pagenationData.currentPage = 1;
      this.searchList();
    },
    // 搜索数据
    searchList() {
      this.loading = true;
      const para = Object.assign({}, this.search);
      getActivityList(para).then((res) => {
        this.loading = false;
        this.pagenationData.pageTotal = res.data.count;
        this.tableData = res.data.list;
      });
    },
    // 获取数据列表
    getActivityList() {
      const para = Object.assign({}, this.pageData);
      getActivityList(para).then((res) => {
        this.loading = false;
        this.pagenationData.pageTotal = res.data.count;
        this.tableData = res.data.list;
      });
    },
    hideaddactivityDialog() {
      this.addactivitydialog.show = false;
    },
    showaddactivityDialog(data) {
      this.addactivitydialog.dialogRow = Object.assign({}, data);
      this.addactivitydialog.show = true;
    },
    hideconfirmPopDialog() {
      this.confirmPopdialog.show = false;
    },
    showconfirmPopDialog() {
      this.confirmPopdialog.show = true;
    },
    onlineActivity(row) {
      this.$confirm("确认上线活动?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(() => {
          const para = Object.assign({}, { activityId: row.activityId });
          activityOnline(para)
            .then((res) => {
              this.$message.success("上线成功");
              setTimeout(() => {
                this.reload();
              }, 20);
            })
            .catch((error) => {});
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消上线",
          });
        });
    },
    offlineActivity(row) {
      this.$confirm("确认下线活动?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(() => {
          const para = Object.assign({}, { activityId: row.activityId });
          activityOffline(para)
            .then((res) => {
              this.$message.success("下线成功");
              setTimeout(() => {
                this.reload();
              }, 20);
            })
            .catch((error) => {});
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消下线",
          });
        });
    },
    // 上下分页
    handleCurrentChange(val) {
      this.pageData.page = val;
      this.search.page = val;
      this.searchList();
    },
    // 详情
    showdetail(row) {
      const para = Object.assign({}, { activityId: row.activityId });
      getDetailList(para)
        .then((res) => {
          this.coupondetaildialog.dialogRow = res.data.list;
          this.coupondetaildialog.show = true;
          this.coupondetaildialog.dialogStatus = row.status;
        })
        .catch((error) => {});
    },
    hidecloseDialog() {
      this.coupondetaildialog.show = false;
    },
    hidemodifyTimeDialog() {
      this.modifyTimedialog.show = false;
    },
    showData(row) {
      this.modifyTimedialog.show = true;
      this.modifyTimedialog.dialogRow = row;
    },
  },
};
</script>
<style lang="scss">
.activityList {
  .section {
    display: flex;
    justify-content: flex-start;
  }
  .linkgame {
    display: inline-block;
    width: 168px;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
  }
  .cell {
    .el-button--mini,
    .el-button--mini.is-round {
      padding: 5px 6px;
    }
  }
  .el-table__row td:last-child {
    text-align: left;
    padding-left: 20px;
  }
}
</style>